<template>
  <div class="merchant-type">
    <ul class="list">
      <li
        class="list-item"
        v-for="(item, index) in merchant.type"
        :key="index"
        :class="{'active': index === current}"
        @click="handleClick(item, index)"
      >
        <div class="image">
          <img v-lazy="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
        </div>
        <div class="text">{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MerchantType',
  props: ['merchant', 'current'],
  // data() {
  //   return {
  //     current: 0
  //   }
  // },
  methods: {
    handleClick(item, index) {
      // this.current = index
      this.$emit('selectType', [item.id, index])
    }
  },
  created () {
    // if (this.merchant.type && this.merchant.type.length > 0) {
    //   this.$emit('getList', this.merchant.type[0].id)
    // }
  }
}
</script>

<style scoped lang="stylus">
.merchant-type
  padding 10px
  .list
    display flex
    flex-wrap wrap
    justify-content start
    padding-left 10px
    .list-item
      width calc(20% - 10px)
      margin-right 10px
      margin-bottom 10px
      box-sizing border-box
      background white
      border 1px solid #eee
      border-radius 5px
      display flex
      flex-direction column
      justify-content space-between
      //height 85px
      &.active
        border-color $main_color
        .text
          color $main_color
      .image
        padding 10px
      .text
        height 20px
        //line-height 20px
        //letter-spacing 1px
        font-weight 700
</style>
